<template>
  <view class="control-page">
    <view class="title">
      <text>设备控制中心</text>
    </view>
    
		<view class="control">
			
			<!-- 通风开关 -->
			<view class="ventilation">
				<view class="control-item">
					<view class="switch-container">
						<image class="control-image" src="../../static/images/tongfeng.png"></image>
						<text>通风</text>
						<switch :checked="sharedState.deviceStates.fan" @change="toggleFan" :disabled="!sharedState.isConnected"></switch>
					</view>
				</view>
			</view>
			<!-- 紫外灯杀菌 -->
			<view class="germicidal">
				<view class="control-item">
					<view class="switch-container">
						<image class="control-image" src="../../static/images/light.png"></image>
						<text>杀菌</text>
						<switch :checked="sharedState.deviceStates.Ultraviolet" @change="toggleUltraviolet" :disabled="!sharedState.isConnected"></switch>
					</view>
				</view>
			</view>
			<!-- 舵机控制 -->
			<view class="servo">
				<view class="control-item">
					<view class="switch-container">
						<image class="control-image" src="../../static/images/Servos.png"></image>
						<text>舵机</text>
						<switch :checked="sharedState.deviceStates.Servos" @change="toggleServos" :disabled="!sharedState.isConnected"></switch>
					</view>
				</view>
			</view>
			<!-- 加湿器 -->
			<view class="humidifier">
				<view class="control-item">
					<view class="switch-container">
						<image class="control-image" src="../../static/images/jiashiqi.png"></image>
						<text>加湿</text>
						<switch :checked="sharedState.deviceStates.humidifier" @change="toggleHumidifier" :disabled="!sharedState.isConnected"></switch>
					</view>
				</view>
			</view>
			<!-- 智能控制 -->
			<view class="ai">
				<view class="control-item">
					<view class="switch-container">
						<image class="control-image" src="../../static/images/ai.png"></image>
						<text>智控</text>
						<switch :checked="sharedState.deviceStates.ai" @change="toggleAI" :disabled="!sharedState.isConnected"></switch>
					</view>
				</view>
			</view>
		</view>
  </view>
</template>

<script>
import { inject } from 'vue'

export default {
  setup() {
    const sharedState = inject('sharedState')
    return { sharedState }
  },
  methods: {

    toggleFan() {
		const newState = !this.sharedState.deviceStates.fan;
		this.sharedState.deviceStates.fan = newState;
		this.sendControlCommand('fan', newState ? 0x1001 : 0x1000);
		console.log("通风开关状态:", newState);
	},
    toggleUltraviolet(checked) {
		const newState = !this.sharedState.deviceStates.Ultraviolet;
		this.sharedState.deviceStates.Ultraviolet = newState;
    	this.sendControlCommand('Ultraviolet', newState ? 0x1101 : 0x1100);
    	console.log("紫外灯开关状态:", newState);
    },
    toggleServos(checked) {
		const newState = !this.sharedState.deviceStates.Servos;
		this.sharedState.deviceStates.Servos = newState;
    	this.sendControlCommand('Servos', newState ? 0x1201 : 0x1200);
    	console.log("舵机开关状态:", newState);
    },
    toggleHumidifier(checked) {
		const newState = !this.sharedState.deviceStates.humidifier;
		this.sharedState.deviceStates.humidifier = newState;
    	this.sendControlCommand('humidifier', newState ? 0x1301 : 0x1300);
    	console.log("加湿器开关状态:", newState);
    },
    toggleAI(checked) {
		const newState = !this.sharedState.deviceStates.ai;
		this.sharedState.deviceStates.ai = newState;
    	this.sendControlCommand('ai', newState ? 0x1401 : 0x1400);
    	console.log("智能控制开关状态:", newState);
    },
    
    sendControlCommand(device, value) {
      if (!this.sharedState.client || !this.sharedState.isConnected) {
        uni.showToast({ title: '未连接MQTT', icon: 'none' })
        return
      }
      
      const payload = {
        method: "thing.event.property.post",
        params: { [device]: value }
      }
      
      this.sharedState.client.publish(
        this.sharedState.aliyunInfo.pubTopic, 
        JSON.stringify(payload)
      )
    }
  }
}
</script>

<style>
	.title {
		font-size: 20px;
		text-align: center;
		padding: 20px;
		font-weight: bold;
	}

	.container {
		padding: 20px;
		font-size: 18px;
	}

	.status {
		margin-bottom: 20px;
		font-weight: bold;
	}

	.data {
		margin-bottom: 20px;
		display: flex;
		flex-direction: column;
		gap: 10px;
		border: 3px solid #ddd;
		border-radius: 20px;
		background-color: ivory;
		padding: 10px;
	}

	.data-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8px;
	}

	.data-item text {
		font-size: 18px;
	}

	.data-image {
		width: 24px;
		height: 24px;
	}

	.control {
		margin-top: 20px;
		display: flex;
		flex-direction: column;
		gap: 12px;
		border: 1px solid #ddd;
		border-radius: 20px;
		padding: 10px;
	}

	.control-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		padding: 10px;
	}

	.switch-container {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.control-image {
		width: 32px;
		height: 32px;
	}

	.camera {
		background-color: azure;
		border: 2px solid #ddd;
		border-radius: 20px;
	}

	.ventilation {
		background-color: aliceblue;
		border: 2px solid #ddd;
		border-radius: 20px;
	}

	.germicidal {
		background-color: thistle;
		border: 2px solid #ddd;
		border-radius: 20px;
	}

	.servo {
		background-color: lightgoldenrodyellow;
		border: 2px solid #ddd;
		border-radius: 20px;
	}

	.humidifier {
		background-color: lightcyan;
		border: 2px solid #ddd;
		border-radius: 20px;
	}

	.ai {
		background-color: lightyellow;
		border: 2px solid #ddd;
		border-radius: 20px;
	}

	button {
		margin: 0;
		padding: 8px 12px;
		border: 1px solid #ddd;
		border-radius: 20px;
		background-color: ghostwhite;
		font-size: 14px;
	}

	button:disabled {
		opacity: 0.6;
	}

	button:active {
		background-color: #e6e6e6;
	}
</style>